<template>
  <el-container id="message-main">
    <el-aside id="message-aside"
      width="141px"
      >
      <el-menu
        :default-active="currentActive"
        @open="handleOpen"
        :router="true"
        class="message-menu">
        <el-menu-item v-if="userRole === 'ADMIN'" index="/count/countList">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span>推送详情</span>
          </template>
        </el-menu-item>
        <!--<el-menu-item index="/count/propellingMovementNum">-->
          <!--<template slot="title">-->
            <!--<i class="el-icon-document"></i>-->
            <!--<span>推送统计</span>-->
          <!--</template>-->
        <!--</el-menu-item>-->
        <el-menu-item index="/count/dayPlay">
          <template slot="title">
            <i class="el-icon-news"></i>
            <span>日活统计</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/count/mouthPlay">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            <span>月活统计</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/count/sevenKeep">
          <template slot="title">
            <i class="el-icon-date"></i>
            <span>留存统计</span>
          </template>
        </el-menu-item>
        <el-menu-item v-if="userRole === 'ADMIN'" index="/count/userPhone">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span>管理用户</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/count/blackList">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span>黑名单管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/count/whiteList">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span>白名单管理</span>
          </template>
        </el-menu-item>
        <el-menu-item v-if="userRole === 'ADMIN'" index="/count/callbackAddress">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span>回调地址配置</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/count/blackTacticsList">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span>黑名单策略</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>

</template>
<script>
import CONSTANT from '../../constant/common';
import cookie from '../../lib/cookie';

export default {
  data() {
    return {
      // currentActive: '/message/customer',
      userRole: cookie(CONSTANT.COOKIE_USER_ROLE),
    };
  },
  computed: {
    currentActive() {
      return this.$route.path || '/message/countList';
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  beforeMount() {
    const localWoa = localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA) ?
      JSON.parse(localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA)) : {};
    const appId = this.$store.state.woa.currentWoa.appId || localWoa.appId;
    console.log('before mouned');
    if (!appId) {
      if (this.userRole === 'USER') {
        this.$message.warning('当前账号无公众号，请联系管理员绑定公众号');
        this.$router.replace('/home');
      } else {
        this.$message.warning('您暂未绑定公众号，现在跳转到公众号绑定');
        this.$router.replace('/wechat-offical-account');
      }
    }
  },
};
</script>
<style lang="less" scoped>
#message-main {
  width: 100%;
  #message-aside {
    height: 500px;
    .message-menu {
      height: 500px;
    }
  }
}
</style>

